<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .snow-container {
      position: absolute;
      height: 100vh;
      width: 100%;
      max-width: 100%;
      top: 0;
      overflow: hidden;
      z-index: 2;
      pointer-events: none;
      background-color: red;
    }

    .snow {
      display: block;
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      -webkit-transform: translate3d(0, -100%, 0);
              transform: translate3d(0, -100%, 0);
      -webkit-animation: snow linear infinite;
              animation: snow linear infinite;
    }
    .snow.foreground {
      background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
      -webkit-animation-duration: 15s;
              animation-duration: 15s;
    }
    .snow.foreground.layered {
      -webkit-animation-delay: 7.5s;
              animation-delay: 7.5s;
    }
    .snow.middleground {
      background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
      -webkit-animation-duration: 20s;
              animation-duration: 20s;
    }
    .snow.middleground.layered {
      -webkit-animation-delay: 10s;
              animation-delay: 10s;
    }
    .snow.background {
      background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');
      -webkit-animation-duration: 30s;
              animation-duration: 30s;
    }
    .snow.background.layered {
      -webkit-animation-delay: 15s;
              animation-delay: 15s;
    }

    @-webkit-keyframes snow {
      0% {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
      }
      100% {
        -webkit-transform: translate3d(15%, 100%, 0);
                transform: translate3d(15%, 100%, 0);
      }
    }

    @keyframes snow {
      0% {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
      }
      100% {
        -webkit-transform: translate3d(15%, 100%, 0);
                transform: translate3d(15%, 100%, 0);
      }
    }
  </style>
</head>
<body>
  <div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
  </div>
</body>
</html>